
<template>

    <div class="clearfix">
        <div style="width:100%;height:100%;position:absolute;">
            <div id="mapl"></div>
        </div>
        <section class="right-bar">
            <div class="col-md-12 top">
                <orderType v-model="conditionEventData.eventSort"/>
            </div>
            <div class="col-md-12 mid">
                <div class="center">
                    <b>选择创建时间</b>
                </div>
                <div class="clearfix">
                    <label class="col-sm-1 control-label">从</label>
                    <div class="col-sm-11">
                        <div class="input-group date">
                            <input type="text" class="form-control pull-right" id="datepicker1" v-model="conditionEventData.eventTimeStart" @mousedown="selectDate1" placeholder="YYYY-MM-DD">
                        </div>
                    </div>
                </div>
                <div class="clearfix" style="margin-top:20px">
                    <label class="col-sm-1 control-label">到</label>
                    <div class="col-sm-11">
                        <div class="input-group date">
                            <input type="text" class="form-control pull-right" id="datepicker2" v-model="conditionEventData.eventTimeEnd" @mousedown="selectDate2" placeholder="YYYY-MM-DD">
                        </div>
                    </div>
                </div>
                <div class="center">
        
                    <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button>
                </div>
            </div>
            <div class="col-md-12 bottom">
                <div style="padding-left:10px;">
                    <i class="fa fa-file-text" aria-hidden="true" style="font-size:24px;float:left"></i>
                    <span>明细</span>
                </div>
                <div class="box-body">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th style="width:50%;">事件编号</th>
                                <th style="width:50%;">类别</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in selEventsData" :key="item.value">
                                <td>{{item.orderId}}</td>
                                <td>{{item.orderType}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <ctrlPage :setPage="findConditionEvent" :type="type" ref="page" />
                </div>

            </div>
        </section>
    </div>
</template>

<script>
import orderType from "@/components/common/orderType.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";
import utils from "@/utils";

export default {
    data() {
        return {
            type:'prev, pager, next',
            selEventsData: [],
            eventPointData: [],
            conditionEventData: {
                eventSort:'',
                eventTimeStart: utils.nowDate(-7),
                eventTimeEnd: utils.nowDate(0)
            },
            map:null,
            total:''
        };
    },
    components: {
        orderType,
        ctrlPage
    },
    mounted() {
        //alert(1);
        this.mapInit();
        //alert(2);
        this.getEventPoint();
        this.$refs.page.getList(1);

    },
    methods: {
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.conditionEventData.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm-dd",
                    startView: 'year',
                    minView: 'month',
                })
                .on("changeDate", ev => {
                    this.conditionEventData.eventTimeEnd = ev.target.value;
                });
        },
        getEventPoint() {
            this.$api.tongji.home.eventPoint().then(res => {
                if (res.success) {
                    // console.log(res);
                }
            });
        },
        mapInit() {
            this.map = new EJMap("mapl", {
                layers: [{ id: "工单", display: true, visible: true }]
            });
            //alert(321);
            // map.showScalebar();
            //map.showNavigation();
        },
        findConditionEvent(pageIndex, rows, callback) {
            this.$api.ticket.list
                .conditionEvent({
                    pageNum: pageIndex || 1,
                    eventTimeStart: this.conditionEventData.eventTimeStart,
                    eventTimeEnd: this.conditionEventData.eventTimeEnd,
                    eventSort:this.conditionEventData.eventSort,
                })
                .then(res => {
                    if (res.success) {
                        // console.log(res);
                        this.selEventsData = res.data.list;
                        this.total = res.data.total;
                        callback(this.selEventsData, this.total);
                    }
                });
                var sql=" ORDER_CREATEDATE> to_date('"+this.conditionEventData.eventTimeStart+"','yyyy-MM-dd') and ORDER_CREATEDATE<to_date('"+this.conditionEventData.eventTimeEnd+"','yyyy-MM-dd')";
                if(!!this.conditionEventData.eventSort){
                    sql+=" and  ORDER_TYPE='"+this.conditionEventData.eventSort+"'";
                }
                 console.log(sql);
                 if(!!this.map){
                    this.map.setLayerDefinition({layerid:"工单"}, sql);
                 }
                
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.right-bar {
    width: 300px;
    float: right;
    .col-md-12 {
        border: 1px solid #bbbbbb;
    }
    .center {
        text-align: center;
        padding: 14px 0;
        button {
            width: 80px;
            height: 25px;
        }
    }
    label {
        padding: 0;
        margin: 0;
    }
    .control-label {
        line-height: 25px;
        height: 25px;
    }

    .top {
        margin: 7px 0;
        padding: 13px;
        background: #ffffff;
        select {
            height: 25px;
            padding: 0;
            border-radius: 5px;
        }
    }
    .mid {
        margin-top: 7px;
        background: #ffffff;

        .date input {
            height: 25px;
            padding: 0;
            padding-left: 10px;
            border-radius: 5px;
        }
        button {
            border-radius: 5px;
            border: 1px solid #bbbbbb;
            margin: 0 auto;
            padding: 0;
            background: white;
            color: black;
        }
    }
    .bottom {
        padding: 20px 5px;
        margin: 7px 0;
        background: #ffffff;

        span {
            display: inline-block;
            width: 150px;
            height: 30px;
            line-height: 24px;
            margin-left: 8px;
            font-size: 14px;
            border-bottom: 1px solid #bbbbbb;
        }
    }
}
table,
table tr th,
table tr td {
    border: 1px solid #bbbbbb;
    text-align: center;
}
</style>
